.modal{
	@include position(fixed);
	z-index: 10;
	transition: all .5s;
	.mask{
		@include position(fixed);
		background-color: $colorI;
		opacity: 0.5;
	}
	&.slide-enter-active{
		top: 0;
	}
	&.slide-enter{
		top: -100%;
	}
	&.slide-leave-active{
		top: -100%;
	}
	.modal-dialog{
		@include  position(absolute,40%,50%,600px,auto);
		background-color: $colorG;
		transform: translate(-50%,-50%);
		.modal-header{
			height: 60px;
			background-color: $colorJ;
			padding: 0 25px;
			line-height: 60px;
			font-size: $fontI;
			.icon-close{
				@include positionImg(absolute,23px,25px,14px,14px,'/imgs/icon-close.png')
				transition:transform .3s;
				&:hover{
					transform:scale(1.5)
				}
			}
		}
		.modal-body{
			padding: 42px 40px 54px;
			font-size: 14px;
		}
		.modal-footer{
			height: 82px;
			line-height: 82px;
			text-align: center;
			background-color: $colorJ;
		}
	}
}